<template>
  <div class="case-select-wrap">
    <el-form :inline="true" :model="formInline" class="form-inline">
      <el-form-item :label="displayLabel + ':'" :label-width="70">
        <el-select
          size="large"
          v-model="formInline.level1"
          placeholder="请选择"
          @change="handleChange"
        >
          <el-option
            v-for="it1 in level1Options"
            :key="it1.value"
            :label="it1.label"
            :value="it1.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select
          size="large"
          :disabled="formInline.level1 === '-1'"
          v-model="formInline.level2"
          placeholder="请选择"
          @change="handleChange"
        >
          <el-option
            v-for="it2 in level2Options"
            :key="it2.value"
            :label="it2.label"
            :value="it2.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-if="caseLevel === 3">
        <el-select
          size="large"
          :disabled="formInline.level2 === '-1'"
          v-model="formInline.level3"
          placeholder="请选择"
          @change="handleChange"
        >
          <el-option
            v-for="it3 in level3Options"
            :key="it3.value"
            :label="it3.label"
            :value="it3.value"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts">
import { PropType, defineComponent } from 'vue';
export default defineComponent({
  name: 'CaseSelect',
  components: {},
  props: {
    displayLabel: {
      type: String as PropType<string>,
      default: () => ''
    },
    caseData: {
      type: Array as PropType<object[]>,
      default: () => []
    },
    caseLevel: {
      type: Number as PropType<number>,
      default: 3
    }
  },
  emits: ['level-change'],
  data() {
    return {
      formInline: {
        level1: '-1',
        level2: '-1',
        level3: '-1'
      },
      level1Options: [{ label: '全部', value: '-1' }],
      level2Options: [{ label: '全部', value: '-1' }],
      level3Options: [{ label: '全部', value: '-1' }],
      localCaseData: []
    };
  },
  watch: {
    'formInline.level1'(val: any) {
      let that = this as any;
      that.formInline.level2 = '-1';
      that.formInline.level3 = '-1';
      if (val === '-1') {
        that.level2Options = [{ label: '全部', value: '-1' }];
        that.level3Options = [{ label: '全部', value: '-1' }];
      } else {
        that.level3Options = [{ label: '全部', value: '-1' }];
        const findOp2 =
          that.level1Options.filter((l1: any) => l1.value === val)[0] || [];
        that.level2Options = [
          { label: '全部', value: '-1' },
          ...findOp2.children.map((c: any) => {
            c.value = c.id + '';
            c.label = c.subjectName + '';
            return c;
          })
        ];
      }
    },
    'formInline.level2'(val: any) {
      let that = this as any;
      if (val === '-1') {
        that.level3Options = [{ label: '全部', value: '-1' }];
      } else {
        const findOp3 =
          that.level2Options.filter((l2: any) => l2.value === val)[0] || [];
        that.level3Options = [
          { label: '全部', value: '-1' },
          ...findOp3.children.map((c: any) => {
            c.value = c.id + '';
            c.label = c.subjectName + '';
            return c;
          })
        ];
        that.formInline.level3 = '-1';
      }
    },
    caseData: {
      handler(val: any) {
        if (val) {
          const that = this as any;
          that.localCaseData = val;
          that.level1Options = [
            { label: '全部', value: '-1' },
            ...val.map((item: any) => {
              return {
                label: item.subjectName,
                value: item.id + '',
                ...item
              };
            })
          ];
        }
      }
    }
  },
  created() {},
  mounted() {},
  methods: {
    handleChange() {
      const that = this as any;
      let levelId = '';
      if (this.formInline.level3 !== '-1') {
        levelId = this.formInline.level3;
      } else if (this.formInline.level2 !== '-1') {
        levelId = this.formInline.level2;
      } else {
        levelId = this.formInline.level1;
      }
      this.$emit('level-change', levelId);
    }
  }
});
</script>
<style lang="scss" scoped>
.case-select-wrap {
  .form-inline {
    display: flex;
  }
  ::v-deep(.el-form-item__label) {
    line-height: 36px;
  }
}
</style>
